import * as React from 'react'
import { cn } from '@/lib/utils'

export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
  value: number
  className?: string
}

const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
  ({ value, className, ...props }, ref) => {
    return (
      <div
        ref={ref}
        className={cn('w-full bg-gray-200 rounded-full h-2.5', className)}
        {...props}
      >
        <div
          className="bg-green-500 h-2.5 rounded-full"
          style={{ width: `${value}%` }}
        />
      </div>
    )
  }
)

Progress.displayName = 'Progress'

export { Progress }